<template>
  <!-- 添加用户 弹窗 -->
  <el-dialog title="权限配置" v-model="dialogVisible" :fullscreen="fullscreen">
    <el-tabs class="p-3" v-model="activeName" tab-position="left" @tab-click="handleClick">
      <el-tab-pane class="ml-10" label="页面元素权限" name="elements">

        <el-input v-model="filterText" style="width: 240px" placeholder="请输入元素名称" />
        <span class="ml-5">是否父子关联</span><el-switch class="ml-5" v-model="linkCheck"></el-switch>
        <div class="h-100 overflow-y-auto mt-3">
          <el-tree
          ref="treeRef"
          :data="treeData"
          :filter-node-method="filterNode"
          node-key="elementId"
          show-checkbox
          default-expand-all
          :check-strictly="!linkCheck"
          :expand-on-click-node="false"
          :props="treeProps"
        >
        </el-tree>
        </div>
      </el-tab-pane>
      <el-tab-pane label="接口权限" name="api">
        <el-transfer :props="defaultProps" filterable :titles="['接口', '用户接口权限']" v-model="roleApi" :data="allApi" />
      </el-tab-pane>
    </el-tabs>
    <template #footer>
      <span class="text-center">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">保存</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, onMounted, watch } from "vue";
import { getDictByCode } from "@/api/modules/dict";
import { getRoleElement, getElementsTree, saveRoleElements } from "@/api/modules/element";
import { getRolePermission, saveRolePermission } from "@/api/modules/permission";
import { ElMessage } from "element-plus";

const roleId = ref("");
const dialogVisible = ref(false);
const fullscreen = ref(false);
const activeName = ref("elements");

const treeProps = {
  children: "children",
  label: "title"
};
const treeData = ref([]);
const treeRef = ref(null);
const filterText = ref("");
watch(filterText, val => {
  treeRef.value.filter(val);
});
const filterNode = (value, data) => {
  if (!value) return true;
  return data.title.includes(value);
};

const allApi = ref([]);
const roleApi = ref([]);
const handleClick = tab => {
  //如果是页面元素权限，则查询用户页面元素权限
  if (tab.props.name == "elements") {
    searchRoleElements();
  }
  if (tab.props.name == "api") {
    searchRoleApis();
  }
};
// 获取角色页面元素权限
const searchRoleElements = () => {
  getRoleElement(roleId.value).then(res => {
    treeRef.value.setCheckedKeys(res.data);
  });
};
// 获取角色接口权限
const searchRoleApis = () => {
  linkCheck.value = false;
  getRolePermission(roleId.value).then(res => {
    roleApi.value = res.data;
  });
};
const defaultProps = {
  key: "value",
  label: "label"
};
onMounted(() => {
  //获取所有元素
  getElementsTree("").then(res => {
    treeData.value = res.data;
  });
  //获取所有接口
  getDictByCode({ dictCode: "allApi" }).then(res => {
    allApi.value = res.data.others;
  });
});

const linkCheck = ref(false);
const handleCancel = () => {
  dialogVisible.value = false;
};
const saveRoleElement = () => {
  const checked = treeRef.value.getCheckedKeys();
  const HalfChecked = treeRef.value.getHalfCheckedKeys();
  //保存元素权限
  let idList = {
    id: roleId.value,
    list: checked.concat(HalfChecked)
  };
  saveRoleElements(idList).then(res => {
    if (res.code === 200) {
      ElMessage.success("页面元素权限保存成功");
    }
  });
};
const saveRoleApi = () => {
  let idList = {
    id: roleId.value,
    list: roleApi.value
  };
  saveRolePermission(idList).then(res => {
    if (res.code === 200) {
      ElMessage.success("接口权限保存成功");
    }
  });
};
const handleConfirm = () => {
  if (activeName.value == "elements") {
    //保存元素权限
    saveRoleElement();
  }
  if (activeName.value == "api") {
    //保存接口权限
    saveRoleApi();
  }
};

const openDialog = id => {
  dialogVisible.value = true;
  roleId.value = id;
  searchRoleElements();
  searchRoleApis();
};
defineExpose({
  openDialog
});
</script>
